<template>
	<view class="content">
		<up-sticky>
				<Header></Header>
		</up-sticky>

		<view v-if="noticeList">
			<up-notice-bar :text="noticeList" mode="closable"></up-notice-bar>
		</view>
		<view class="oneBox">
			<view class="oneBoxContent">
				<view class="ContentTopBox">
					<view class="oneBoxTitle">

						<view class="TitleTex">
							呼大侠
						</view>
						<view class="iconfont fa-maikefeng">

						</view>
					</view>
					<view class="oneBoxText">
						AI智能通讯服务平台，让沟通流畅！
					</view>
				</view>
				<view class="ContentBottBox">
					<up-input class="botInp" v-model="phoneNumber" placeholder="请输入手机号注册体验" border="surround" clearable>
						<template #prefix>
							<view class="iconfont fa-shouji">

							</view>
						</template>
						<template #suffix>
							<!-- <up-code ref="uCodeRef" @change="codeChange" seconds="20" changeText="X秒重新获取哈哈哈"></up-code> -->
							<up-button @click="getPhoneCode"
								style="background-color: #4268db; height: 37rpx; border-radius: 30rpx; color: #fff;"
								:text="tips"></up-button>
						</template>
					</up-input>
					<up-toast ref="uToastRef"></up-toast>
				</view>
			</view>
		</view>

		<view class="boxTwo">
			<view class="boxTwoCont">
				<view class="boxTwoContleft">
					<view class="boxTwoItemTex">
						专业团队
					</view>
					<view class="boxTwoItemTex">
						实力强悍
					</view>
					<view class="boxTwoItemTex">
						技术过硬
					</view>
				</view>
				<view class="boxTwoContcenter">
					<image src="../../static/dashabordImg/twoImg1.png" mode=""></image>
				</view>
				<view class="boxTwoContright">
					<view class="boxTwoItemTex">
						真人语音
					</view>
					<view class="boxTwoItemTex">
						智能沟通
					</view>
					<view class="boxTwoItemTex">
						智能外呼
					</view>
				</view>
			</view>
		</view>
		<view class="boxThree">
			<view class="boxThreeTop">
				<view class="boxThreeTopText">
					产品功能支持
				</view>
			</view>
			<view class="boxThreeBottom">
				<view class="boxThreeBottom-item">
					<view class="item-left">
						<view class="item-leftTitle">
							电话机器人
						</view>
						<view class="item-leftTwoBox">
							<view class="item-leftTex">
								真人语音通话
							</view>
							<view class="item-leftTex">
								专业业务解答
							</view>
						</view>
						<view class="item-leftTexTed" @click="handleNavigatToRobot">
							了解更多 >>
						</view>
					</view>
					<view class="item-right">
						<image src="../../static/dashabordImg/threeImg1.png" mode=""></image>
					</view>
				</view>
				<view class="boxThreeBottom-item">
					<view class="item-left">
						<view class="item-leftTitle">
							群呼系统
						</view>
						<view class="item-leftTwoBox">
							<view class="item-leftTex">
								通话稳定
							</view>
							<view class="item-leftTex">
								高质量营销
							</view>
						</view>
						<view class="item-leftTexTed" @click="handleNavigatTogroup()">
							了解更多 >>
						</view>
					</view>
					<view class="item-right">
						<image src="../../static/dashabordImg/threeImg2.png" mode=""></image>
					</view>
				</view>
				<view class="boxThreeBottom-item">
					<view class="item-left">
						<view class="item-leftTitle">
							crm系统
						</view>
						<view class="item-leftTwoBox">
							<view class="item-leftTex">
								智能客户管理系统
							</view>
							<view class="item-leftTex">
								增强客户服务质量
							</view>
						</view>
						<view class="item-leftTexTed" @click="handleNavigatToCrm">
							了解更多 >>
						</view>
					</view>
					<view class="item-right">
						<image src="../../static/dashabordImg/threeImg3.png" mode=""></image>
					</view>
				</view>
				<view class="boxThreeBottom-item">
					<view class="item-left">
						<view class="item-leftTitle">
							大数据拓客
						</view>
						<view class="item-leftTwoBox">
							<view class="item-leftTex">
								各维度画像分析
							</view>
							<view class="item-leftTex">
								大数据精准拓客
							</view>
						</view>
						<view class="item-leftTexTed" @click="handleNavigatToBigData">
							了解更多 >>
						</view>
					</view>
					<view class="item-right">
						<image src="../../static/dashabordImg/threeImg4.png" mode=""></image>
					</view>
				</view>
				<view class="boxThreeBottom-item">
					<view class="item-left">
						<view class="item-leftTitle">
							电销卡
						</view>
						<view class="item-leftTwoBox">
							<view class="item-leftTex">
								多归属地可选
							</view>
							<view class="item-leftTex">
								高频防封稳定
							</view>
						</view>
						<view class="item-leftTexTed" @click="handleNavigatToSales">
							了解更多 >>
						</view>
					</view>
					<view class="item-right">
						<image src="../../static/dashabordImg/threeImg5.png" mode=""></image>
					</view>
				</view>
				<view class="boxThreeBottom-item">
					<view class="item-left">
						<view class="item-leftTitle">
							回拨系统
						</view>
						<view class="item-leftTwoBox">
							<view class="item-leftTex">
								线路稳定
							</view>
							<view class="item-leftTex">
								接通率高
							</view>
						</view>
						<view class="item-leftTexTed" @click="handleNavigatToCallback">
							了解更多 >>
						</view>
					</view>
					<view class="item-right">
						<image src="../../static/dashabordImg/threeImg6.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="boxFour">
			<view class="boxFourTit">
				<view class="boxFourText">
					低成本高效率
				</view>
			</view>
			<view class="boxFourContent">
				<view class="boxFourContent-item">
					<view class="boxFourContent-itemImg">
						<image src="../../static/dashabordImg/fourImg1.png" mode=""></image>
					</view>
					<view class="boxFourContent-itemText">
						<view class="TextContent">
							人工成本80%
						</view>
						<view class="TextContent-img">
							<image src="../../static/dashabordImg/indexImg1.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="boxFourContent-item">
					<view class="boxFourContent-itemImg">
						<image src="../../static/dashabordImg/fourImg2.png" mode=""></image>
					</view>
					<view class="boxFourContent-itemText">
						<view class="TextContent">
							工作效率200%
						</view>
						<view class="TextContent-img">
							<image src="../../static/dashabordImg/fourImg5.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="boxFourContent-item">
					<view class="boxFourContent-itemImg">
						<image src="../../static/dashabordImg/fourImg3.png" mode=""></image>
					</view>
					<view class="boxFourContent-itemText">
						<view class="TextContent">
							管理成本50%
						</view>
						<view class="TextContent-img">
							<image src="../../static/dashabordImg/indexImg1.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="fiveBox">
			<view class="fiveBoxTit">
				<view class="fiveBoxText">
					功能介绍
				</view>
			</view>
			<view class="fiveBoxContent">

				<view class="fiveBoxContent-item" :class="{'bgItem':fiveBoxNum == item.id}"
					@click="handleChangeFiveItem(item)" v-for="item in fiveBoxContentList" :key="item.id">
				
					<view class="fiveBoxContent-itemImg">
						<!-- <image :src="item.image" mode=""></image> -->
					</view>
					<view class="fiveBoxContent-itemConten">
						{{item.title}}
					</view>
					<view class="fiveBoxContent-itemText">
						<view class="itemText-content">
							{{item.text}}
						</view>
					</view>

				</view>

			</view>
		</view>

		<view class="sixBox">
			<!-- <image class="sixBgImg" src="../../static/dashabordImg/sixImg2.png" mode=""></image> -->
			<view class="sixBoxTextBox">
				<view class="TextBoxOne">
					AI外呼系统+CRM客户管理
				</view>
				<view class="TextBoxTwo">
					自动化销售管理，提供全方位的服务和保障
				</view>
				<view class="TextBoxThree">
					查看系统升级
				</view>
			</view>
		</view>
		<view class="sevenBox">
			<view class="sevenContentText">
				全范围服务保障
			</view>
			<view class="sevenContent">
				<div class="boxXin">服务保障</div>
				<div class="surroundBox">
					<div class="surround surround1">7x24小时售后服务</div>
					<div class="surround surround2">产品培训</div>
					<div class="surround surround3">系统定期优化</div>
					<div class="surround surround4">稳定安全</div>
					<div class="surround surround5">多种部署方式</div>
					<div class="surround surround6">技术支持</div>
					<div class="surround surround7">定制解决方案</div>
					<div class="surround surround8">专属客服</div>
				</div>
			</view>
		</view>
		<view class="eightBox">
			<view class="eightBoxText">
				各行业10000+客户选择
			</view>
			<view class="eightBoxContent">
				<view class="scrollBox">
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg1.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg2.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg3.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg4.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg1.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg2.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg3.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg4.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg1.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg2.png" mode=""></image>
					</view>
				</view>
				<view class="scrollBox">
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg5.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg6.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg7.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg8.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg9.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg5.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg6.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg7.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg8.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg9.png" mode=""></image>
					</view>
				</view>
				<view class="scrollBox">
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg10.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg11.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg12.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg13.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg10.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg11.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg12.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg13.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg10.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg11.png" mode=""></image>
					</view>
				</view>
				<view class="scrollBox">
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg14.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg15.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg16.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg17.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg18.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg14.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg15.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg16.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg17.png" mode=""></image>
					</view>
					<view class="item-box">
						<image src="../../static/dashabordImg/eightImg18.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<Footer></Footer>

	</view>
</template>

<script setup>
	import Header from '../compontents/header.vue'
	import Footer from '../compontents/footer.vue'
	import {
		ref,
		getCurrentInstance,
		onMounted
	} from 'vue'
	import api from '@/utils/request'
	const {
		proxy
	} = getCurrentInstance()
	const noticeList = ref('')
	const fiveBoxNum = ref(1)
	const fiveBoxContentList = ref([{
			id: 1,
			image: '/static/dashabordImg/fourImg1.png',
			title: "多渠道精准获客",
			text: "企业通过线索导入，客户画像，客户分析等方式实现精准触达。"
		},
		{
			id: 2,
			image: '/static/dashabordImg/fiveImg26.png',
			title: "自动化流程",
			text: "客户资料一键批量导入，自主设定自动拨打时间。"
		},
		{
			id: 3,
			image: '/static/dashabordImg/fiveImg3.png',
			title: "智能分析",
			text: "准确识别客户信息，分析客户意向程度，通话自动生成分析报表。"
		},
		{
			id: 4,
			image: '/static/dashabordImg/fiveImg4.png',
			title: "录音功能",
			text: "自带录音功能，后期回听电话内容有助于提高销售话术和改进流程。"
		},
		{
			id: 5,
			image: '/static/dashabordImg/fiveImg5.png',
			title: "高效管理",
			text: "可以随时通过移动端接收意向客户信息，提高工作效率。"
		},
	])
	const tips = ref('立即试用')
	const tipPlay = ref('立即试用')
	const show = ref(true)
	const list = ref([])
	const title = ref('')
	const phoneNumber = ref('')
	const uToastRef = ref(null)
	onMounted(()=>{
		handleGetNoticeBar()
	})
	const handleGetNoticeBar = function(){
		api.get('v1/home/getNoticeList').then(res=>{
			if(res.data && res.data.length > 0){
				noticeList.value = res.data.map(item=> item.content).join(',')
			}
		}).catch(err=>{
			
		})
	}
	const handleChangeFiveItem = function(item) {
		fiveBoxNum.value = item.id
	}
	const codeChange = function() {}
	const getPhoneCode = function() {
		if (!phoneNumber.value) {
			uToastRef.value.show({
				type: 'error',
				icon: false,
				message: "请输入手机号",
			})
			return;
		}
		if (!/^1[3456789]\d{9}$/.test(phoneNumber.value)) {
			uToastRef.value.show({
				type: 'error',
				icon: false,
				message: "手机号码有误",
			})
		} else {
			api.post('v1/home/addTryUser', {
				phone: phoneNumber.value
			}).then((res) => {
				if (res.code !== 0) {} else {
					uToastRef.value.show({
						type: 'success',
						icon: false,
						message: res.msg,
					})
					phoneNumber.value = ""
				}
			}).catch(err => {

			})
		}
	}
	const handleNavigatTogroup = function() {
		uni.navigateTo({
			url: '/pages/groupCall/index'
		})
	}
	const handleNavigatToCrm = function() {
		uni.navigateTo({
			url: '/pages/crm/index'
		})
	}
	const handleNavigatToBigData = function() {
		uni.navigateTo({
			url: '/pages/bigData/index'
		})
	}
	const handleNavigatToRobot = function() {
		uni.navigateTo({
			url: '/pages/callRobot/index'
		})
	}
	const handleNavigatToSales = function() {
		uni.navigateTo({
			url: '/pages/salesCard/index'
		})
	}
	const handleNavigatToCallback = function() {
		uni.navigateTo({
			url: '/pages/callBackSys/index'
		})
	}
</script>

<style lang="scss" scoped>
	@import '@/static/icon/iconfont.css';

	.content {
		width: 100%;
		height: 100%;

		.oneBox {
			height: 440rpx;
			background-image: url('../../static/dashabordImg/ydDashboardImg3.png');
			background-repeat: no-repeat;
			background-size: cover;
			background-position: 60% center;

			:deep(.u-button__text) {
				font-size: 24rpx !important;
			}

			.oneBoxContent {
				padding: 0 45rpx;
				height: 100%;

				.ContentTopBox {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					gap: 30rpx;
					height: 153rpx;
					padding-top: 100rpx;

					.oneBoxTitle {
						display: flex;
						align-items: center;
						margin-left: 10rpx;
						gap: 40rpx;

						.TitleTex {
							font-size: 76rpx;
							font-weight: 700;
						}

						.fa-maikefeng {
							font-size: 40rpx;
							color: #67b29c;
						}
					}

					.oneBoxText {
						font-size: 28rpx;
						font-weight: 500;
					}
				}

				.ContentBottBox {
					width: 85%;
					margin: auto;
					height: calc(100% - 253rpx);
					display: flex;
					justify-content: center;
					align-items: center;

					.fa-shouji {
						font-size: 30rpx
					}

					.botInp {
						width: 70%;
						height: 47rpx;
						border-radius: 40rpx;
						padding: 0 18rpx !important;
						border-color: #7d97e3 !important;
					}

					:deep(.uni-input-placeholder) {
						font-size: 24rpx;
					}
				}
			}
		}

		.boxTwo {
			height: 281rpx;
			background-color: #5e86f8;
			display: flex;
			justify-content: center;
			padding: 36rpx 0;

			.boxTwoCont {
				width: 80%;
				display: flex;
				justify-content: center;
				align-items: center;

				.boxTwoContleft {
					width: 35%;
					height: 100%;
					display: flex;
					justify-content: space-evenly;
					align-items: center;
					flex-direction: column;

					.boxTwoItemTex {
						width: 205rpx;
						height: 50rpx;
						line-height: 50rpx;
						background-color: #fff;
						text-align: center;
						border-radius: 30rpx;
						color: #4d4d4d;
						font-size: 25rpx;
					}
				}

				.boxTwoContcenter {
					width: 30%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 90%;
						height: 90%;
					}
				}

				.boxTwoContright {
					width: 35%;
					height: 100%;
					display: flex;
					justify-content: space-evenly;
					align-items: center;
					flex-direction: column;

					.boxTwoItemTex {
						width: 205rpx;
						height: 50rpx;
						line-height: 50rpx;
						background-color: #fff;
						text-align: center;
						border-radius: 30rpx;
						color: #4d4d4d;
						font-size: 25rpx;
					}
				}
			}
		}

		.boxThree {
			height: 707rpx;
			display: flex;
			flex-direction: column;
			padding: 0 38rpx;

			.boxThreeTop {
				height: 138rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.boxThreeTopText {
					font-size: 31rpx;
					font-weight: 600;
				}
			}

			.boxThreeBottom {
				flex: 1;
				display: flex;
				gap: 30rpx;
				flex-wrap: wrap;

				.boxThreeBottom-item {
					width: calc(50% - 20rpx);
					height: 167rpx;
					border: 1rpx solid #eee;
					border-radius: 20rpx;
					box-shadow: 0 0 15rpx #f3f3f3;
					display: flex;

					.item-left {
						width: 50%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-evenly;

						.item-leftTitle {
							font-size: 21rpx;
							font-weight: 600;
						}

						.item-leftTwoBox {
							display: flex;
							flex-direction: column;
							align-items: center;

							.item-leftTex {
								font-size: 16rpx;

							}
						}

						.item-leftTexTed {
							font-size: 15rpx;
							color: #427cf3;
						}
					}

					.item-right {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: flex-end;

						image {
							width: 100%;
							height: 60%;
						}
					}
				}
			}
		}

		.boxFour {
			height: 371rpx;
			padding-top: 30rpx;

			.boxFourTit {
				height: 135rpx;
				line-height: 135rpx;
				text-align: center;

				.boxFourText {
					font-size: 31rpx;
					font-weight: 600;
				}
			}

			.boxFourContent {
				height: calc(100% - 165rpx);
				display: flex;

				.boxFourContent-item {
					width: 33.3%;
					height: 100%;
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;
					gap: 20rpx;

					.boxFourContent-itemImg {
						width: 167rpx;
						height: 140rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.boxFourContent-itemText {
						height: 20%;
						display: flex;
						align-items: center;
						gap: 12rpx;

						.TextContent {
							font-size: 20rpx;
							font-weight: 600;
						}

						.TextContent-img {
							width: 25rpx;
							height: 40rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}
		}

		.fiveBox {
			height: 468rpx;
			padding-top: 30rpx;
			overflow: hidden;

			.fiveBoxTit {
				height: 145rpx;
				line-height: 145rpx;
				text-align: center;

				.fiveBoxText {
					font-size: 32rpx;
					font-weight: 600;
				}
			}

			.fiveBoxContent {
				width: 100%;
				height: calc(100% - 175rpx);
				padding-left: 20rpx;
				display: flex;
				overflow-x: auto;
				white-space: nowrap;
				box-sizing: border-box;

				.fiveBoxContent-item {
					flex: 0 0 auto;
					width: 234rpx;
					height: 186rpx;
					border-radius: 10rpx;
					border: 1px solid #eee;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					gap: 13rpx;
					box-shadow: 0px 0px 15px #f3f3f3;
					margin-right: 20rpx;

					.fiveBoxContent-itemImg {
						width: 57rpx;
						height: 50rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.fiveBoxContent-itemText {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						padding: 0 36rpx;
						flex-wrap: wrap;
						gap: 10rpx;

						.itemText-content {
							text-align: center;
							white-space: normal;
							font-size: 16rpx;
						}
					}

					.fiveBoxContent-itemConten {
						font-size: 18rpx;
						font-weight: 600;
					}
				}

				@keyframes identifier {
					0% {
						width: 234rpx;
						height: 186rpx;
					}

					50% {
						width: 248rpx !important;
						height: 200rpx !important;
					}

					100% {
						width: 254rpx !important;
						height: 212rpx !important;
					}
				}

				.bgItem {
					background-color: #3659ec;
					color: #fff;
					animation: identifier 3.5s;
					// transition: all .5s;
				}
			}
		}

		.sixBox {
			height: 263rpx;
			border: 1px solid #ccc;
			background-image: url('../../static/dashabordImg/sixImg1.png');
			background-repeat: no-repeat;
			background-size: cover;
			background-position: 60% center;
			position: relative;

			// .sixBgImg {
			// 	position: absolute;
			// 	left: 0;
			// 	top: 0;
			// 	width: 100%;
			// 	height: 100%;
			// }

			.sixBoxTextBox {
				height: calc(100% - 36rpx);
				margin-top: 36rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				padding-left: 35rpx;

				.TextBoxOne,
				.TextBoxTwo {
					font-size: 28rpx;
					font-weight: 600;
					color: #fff;
				}

				.TextBoxThree {
					height: 48rpx;
					width: 231rpx;
					line-height: 48rpx;
					text-align: center;
					background-color: #fff;
					border-radius: 20rpx;
					color: #3658eb;
					font-weight: 600;
					font-size: 24rpx;
					margin-left: 16rpx;
				}
			}
		}

		.sevenBox {
			height: 804rpx;

			.sevenContentText {
				height: 252rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 31rpx;
				font-weight: 600;
			}

			.sevenContent {
				height: calc(100% - 252rpx);
				background-image: url('../../static/dashabordImg/sevenImg1.png');
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center 44%;
				position: relative;

				.boxXin {
					position: absolute;
					top: 50%;
					left: 50%;
					color: #fff;
					transform: translate(-50%, -50%);
					// box-shadow: 0px 0px 15px #f3f3f3;
				}

				.surroundBox {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);

					.surround {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 110rpx;
						height: 25rpx;
						line-height: 25rpx;
						text-align: center;
						font-size: 18rpx;
						color: #4b4b4b;
						font-weight: 600;
					}

					.surround1 {
						transform: translateX(-22rpx) translateY(-256rpx);
					}

					.surround2 {
						transform: translateX(134rpx) translateY(-133rpx);
					}

					.surround3 {
						transform: translateX(224rpx) translateY(-10rpx);
					}

					.surround4 {
						transform: translateX(140rpx) translateY(112rpx);
					}

					.surround5 {
						transform: translateX(-22rpx) translateY(216rpx);
					}

					.surround6 {
						transform: translateX(-199rpx) translateY(112rpx);
					}

					.surround7 {
						transform: translateX(-264rpx) translateY(-6px);
					}

					.surround8 {
						transform: translateX(-192rpx) translateY(-135rpx);
					}
				}
			}
		}

		.eightBox {
			height: 685rpx;

			.eightBoxText {
				padding-top: 57rpx;
				height: 172rpx;
				line-height: 172rpx;
				text-align: center;
				font-size: 31rpx;
				font-weight: 600;
			}

			.eightBoxContent {
				height: calc(100% - 229rpx);
				box-shadow: 0px 0px 15px #eee;
				display: flex;
				flex-direction: column;
				align-items: center;
				overflow: hidden;
				justify-content: space-evenly;

				@keyframes anmiat {
					0% {
						transform: translateX(0%);
					}

					25% {
						transform: translateX(-20%);
					}

					50% {
						transform: translateX(-50%);
					}

					75% {
						transform: translateX(-75%);
					}

					100% {
						transform: translateX(-100%);
					}
				}

				.scrollBox {
					display: flex;
					height: 58rpx;
					width: 100%;
					display: flex;
					align-items: center;
					// overflow-x: auto;
					flex-wrap: nowrap;
					// white-space: nowrap;
					transition: all 3.5s;
					gap: 10rpx;

					&:nth-child(odd) {
						animation: anmiat 5.5s linear infinite;
					}

					&:nth-child(even) {
						animation: anmiat 4.5s linear infinite;
					}

					.item-box {


						// animation: anmiat 3.5s linear infinite;
						// transition: all .5s;
						flex: 0 0 auto;
						width: 155rpx;
						height: 54rpx;
						border-radius: 30rpx;
						box-shadow: 0rpx 0rpx 15rpx #f0f0f0;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 80%;
							height: 80%;
						}
					}
				}
			}
		}


	}
</style>